<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 用户反馈
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="query.province" placeholder="省" clearable filterable class="handle-select mr10" @change="listAllCity">
          <el-option
              v-for="item in provinceOptions"
              :key="item.code"
              :label="item.value"
              :value="item">
          </el-option>
        </el-select>
        <el-select v-model="query.city" clearable filterable placeholder="市" class="handle-select mr10" @change="listAllDistrict">
          <el-option
              v-for="item in cityOptions"
              :key="item.code"
              :label="item.value"
              :value="item">
          </el-option>
        </el-select>
        <el-select v-model="query.district" clearable filterable placeholder="区（县）" class="handle-select mr10">
          <el-option
              v-for="item in districtOptions"
              :key="item.code"
              :label="item.value"
              :value="item">
          </el-option>
        </el-select>
        <!--<el-select v-model="query.gradeIdList" clearable multiple filterable placeholder="年级" class="handle-select mr10">
          <el-option
              v-for="item in gradeOptions"
              :key="item.code"
              :label="item.value"
              :value="item.code">
          </el-option>
        </el-select>
        <el-select v-model="query.subjectIdList" clearable multiple filterable placeholder="科目" class="handle-select mr10">
          <el-option
              v-for="item in subjectOptions"
              :key="item.code"
              :label="item.value"
              :value="item.code">
          </el-option>
        </el-select>-->
        <el-select v-model="query.status" clearable filterable placeholder="状态" class="handle-select mr10">
          <el-option
              v-for="item in statusOptions"
              :key="item.code"
              :label="item.value"
              :value="item.code">
          </el-option>
        </el-select>
        <el-date-picker
            placeholder="开始日期"
            type="datetime"
            v-model="query.startTime"
            class="handle-select mr10"
            style="width: 20%;"
        ></el-date-picker>
        <el-date-picker
            placeholder="结束日期"
            type="datetime"
            v-model="query.endTime"
            class="handle-select mr10"
            style="width: 20%;"
        ></el-date-picker>
        <!--<el-input placeholder="请输入内容" v-model="query.searchValue" class="handle-input mr10">
          <el-select v-model="query.searchType" slot="prepend" placeholder="请选择" class="handle-select">
            <el-option label="ISBN" value="1"></el-option>
            <el-option label="书名" value="2"></el-option>
            <el-option label="上报人" value="3"></el-option>
          </el-select>
        </el-input>-->
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh-right" @click="resetQuery">重置</el-button>
      </div>
      <el-table
          :data="tableData"
          height="580"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="isbn" label="ISBN"></el-table-column>
        <el-table-column prop="num" label="反馈数"></el-table-column>
        <el-table-column  label="购买状态">
          <template slot-scope="scope">
            <p v-if="scope.row.status"><span style="color: #67C23A">已购买</span></p>
            <p v-else><span style="color: #F56C6C">未购买</span></p>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="query.pageNumber"
            :page-sizes="[10,20, 30, 50, 100]"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listAllBookGrade,
  listAllCity,
  listAllDistrict,
  listAllProvince,
  listAllSubject, bookDetails, insertFileTask, queryFileTask, appFeedBackListAll
} from "@/api/bookservice";
export default {
  name: 'basetable',
  data() {
    return {
      query: {
        province: {},
        city: {},
        district: {},
        status: 0,
        gradeIdList: [],
        subjectIdList: [],
        startTime:null,
        endTime:null,
        pageNumber: 1,
        pageSize: 10,
        searchType:"1",
        searchValue:""
      },
      updateStatusBatchData:{
        fileList:[],
        param:{
          fileName:null,
          fileUrl:null,
          taskType:2,
          operationType:1,
          conditions:'{status:1}',
          creator:localStorage.getItem('ms_username')
        }
      },
      reportBatchData:{
        fileList:[],
        param:{
          fileName:null,
          fileUrl:null,
          taskType:3,
          operationType:1,
          conditions:'{status:0}',
          creator:localStorage.getItem('ms_username')
        }
      },
      provinceOptions: [],
      cityOptions: [],
      districtOptions: [],
      gradeOptions: [],
      subjectOptions: [],
      statusOptions:[
        {
          code:0,
          value:"全部"
        },
        {
          code:1,
          value:"已购买"
        },
        {
          code:2,
          value:"未购买"
        }
      ],
      tableData: [],
      multipleSelection: [],
      delList: [],
      reportBatchVisible: false,
      updateStatusBatchVisible: false,
      exportVisible: false,
      loading:false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1
    };
  },
  async created() {
    await this.defaultDate();
    await this.listAllProvince();
    this.listAllBookGrade();
    this.listAllSubject();
    await this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    async getData() {
      this.loading = true;
      let distinctBegin = null;
      let distinctEnd = null;
      if (Object.keys(this.query.district).length > 0) {
        distinctBegin = Number(this.query.district.code);
        distinctEnd = Number(this.query.district.code);
      } else if (Object.keys(this.query.city).length > 0) {
        distinctBegin = Number(this.query.city.code);
        distinctEnd = Number(this.query.city.code) + 99;
      } else if (Object.keys(this.query.province).length > 0) {
        distinctBegin = Number(this.query.province.code);
        distinctEnd = Number(this.query.province.code) + 9999;
      }
      let param = {
        districtCodeBegin: distinctBegin,
        districtCodeEnd: distinctEnd,
        status: this.query.status,
        startTime: this.query.startTime,
        endTime: this.query.endTime
      }
      await appFeedBackListAll(param, this.query.pageNumber, this.query.pageSize).then((res) => {
        this.tableData = res.data.list;
        this.pageTotal = res.data.total || 50;
      });
      this.loading = false;
    },
    defaultDate(){
      this.query.startTime = this.$moment().startOf("months").startOf('day');
      this.query.endTime = this.$moment().subtract(1,'days').endOf('day');
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageNumber', 1);
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
          .then(() => {
            this.$message.success('删除成功');
            this.tableData.splice(index, 1);
          })
          .catch(() => {});
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageNumber', val);
      this.getData();
    },
    // 分页导航
    handleSizeChange(val) {
      this.$set(this.query, 'pageSize', val);
      this.getData();
    },
    // 查询所有的省
    async listAllProvince() {
      await listAllProvince().then((res) => {
        this.provinceOptions = res.data;
        this.query.province = res.data[0];
      });
      this.listAllCity();
    },
    listAllCity(){
      if(this.query.province){
        let param = {"province":this.query.province.value};
        listAllCity(param).then((res) => {
          this.cityOptions = res.data;
        });
      }
    },
    listAllDistrict(){
      if(this.query.province && this.query.city){
        let param = {"province":this.query.province.value,"city":this.query.city.value};
        listAllDistrict(param).then((res) => {
          this.districtOptions = res.data;
        });
      }
    },
    listAllBookGrade(){
      listAllBookGrade().then((res) => {
        let temp = [];
        for (let obj of res.data) {
          temp.push({"value":obj.gradeValue,"code":obj.gradeId});
        }
        this.gradeOptions = temp;
      });
    },
    listAllSubject(){
      listAllSubject().then((res) => {
        let temp = [];
        for (let obj of res.data) {
          temp.push({"value":obj.subjectValue,"code":obj.subjectId});
        }
        this.subjectOptions = temp;
      },);
    },
    resetQuery(){
      this.query =  this.$options.data().query;
      this.defaultDate();
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 600px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.table-td-thumb {
  display: inline-block;
  margin: 5px 5px 5px 5px;
  width: 40px;
  height: 40px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
